@charset "UTF-8";
@import 'reset';

.web {

    // 登录注册标题
    .login-title {
        position: fixed;
        width: 100vw;
        height: 13.3333vw;
        font-weight: bold;
        color: #555555;
        text-align: center;
        line-height: 13.3333vw;
        background-color: #FFFFFF
    }

    .blank {
        width: 100vw;
        height: 13.3333vw;
    }

    // 中间logo
    .logo {
        display: flex;
        width: 100vw;
        height: 32.512vw;

        img {
            margin: auto;
            width: 36.8vw;
            height: 16vw;
        }
    }

    // 手机号输入框
    // 验证码输入框
    // 密码输入框
    // 重复密码输入框
    .tel,
    .verify,
    .password,
    .password-again {
        margin: 0 auto;
        width: 92vw;
        height: 19vw;
        border-bottom: .5333vw solid #E9ECF0;

        h3 {
            margin-bottom: 4.5333vw;
            font-size: 3.7333vw;
            color: #555555;
        }

        input {
            background: none;
            outline: none;
            border: none;
            font-size: 4vw;
        }
    }

    .verify {
        position: relative;

        h3 {
            margin-top: 4.2667vw;
        }

        .verify-get {
            display: inline-block;
            position: absolute;
            right: 9.112vw;

            a {
                font-size: 4vw;
                color: #555555;
                text-decoration: none;
            }
        }
    }

    .password,
    .password-again {
        h3 {
            margin-top: 4.2667vw;
        }
    }

    // 验证码登录/注册按钮
    // 密码登录按钮
    .verify-login,
    .password-login {
        margin: 9.8667vw auto 0;
        width: 92vw;
        height: 12vw;

        button {
            width: 100%;
            height: 100%;
            font-size: 4.6667vw;
            color: #FFFFFF;
            border: none;
            background-color: #884E22;
        }
    }

    .password-login {
        margin: 5.3333vw auto 2.6667vw;

        button {
            color: #555555;
            background-color: transparent;
        }
    }

    // 第三方登录
    .thirdparty-login {
        text-align: center;

        h3 {
            position: relative;
            font-size: 3.7333vw;
            color: #555555;

            &::before {
                content: '';
                display: block;
                position: absolute;
                top: 2vw;
                left: 10vw;
                width: 24vw;
                height: .2667vw;
                background-color: #E9ECF0;
            }

            &::after {
                content: '';
                display: block;
                position: absolute;
                top: 2vw;
                right: 10vw;
                width: 24vw;
                height: .2667vw;
                background-color: #E9ECF0;
            }
        }
    }

    .qq-wx {
        margin: 5.3333vw auto 0;
        display: flex;
        justify-content: space-around;
        width: 92vw;
        height: 8vw;

        a {
            text-decoration: none;
            font-size: 3.7333vw;
            color: #555555;
        }
    }
}